<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热销商品</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-dashboard.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">热销商品</h1>
                <button onclick="exportData()" class="text-white">
                    <i class="fas fa-download text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Stats Overview -->
        <div class="px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="grid grid-cols-3 gap-3 text-white text-center">
                    <div>
                        <p class="text-lg font-bold">156</p>
                        <p class="text-xs opacity-80">总商品数</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">2,485</p>
                        <p class="text-xs opacity-80">总销量</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">¥385K</p>
                        <p class="text-xs opacity-80">总销售额</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Options -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-2 overflow-x-auto">
                <button onclick="filterProducts('all')" id="filter-all" class="bg-indigo-500 text-white text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    全部商品
                </button>
                <button onclick="filterProducts('week')" id="filter-week" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    本周热销
                </button>
                <button onclick="filterProducts('month')" id="filter-month" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    本月热销
                </button>
                <button onclick="filterProducts('rising')" id="filter-rising" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    上升趋势
                </button>
            </div>
        </div>

        <!-- Best Sellers List -->
        <div class="h-[calc(852px-200px)] overflow-y-auto pb-24">
            <div class="p-4">
                <!-- Ranking List -->
                <div class="space-y-3">
                    <!-- Rank 1 -->
                    <div class="bg-gradient-to-r from-yellow-50 to-orange-50 border border-yellow-200 rounded-xl p-4">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-400 text-white rounded-full flex items-center justify-center text-lg font-bold mr-4 flex-shrink-0">
                                <i class="fas fa-crown"></i>
                            </div>
                            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-sm font-semibold text-gray-800">无线蓝牙耳机 Pro Max</h3>
                                    <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">冠军</span>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs">
                                    <div>
                                        <span class="text-gray-500">销量: </span>
                                        <span class="font-bold text-orange-600">86件</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">销售额: </span>
                                        <span class="font-bold text-green-600">¥25,714</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">增长: </span>
                                        <span class="font-bold text-red-600">+15.2%</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-sm font-bold text-indigo-600">¥299</span>
                                    <div class="flex space-x-1">
                                        <button onclick="viewProductDetail('BT001')" class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">详情</button>
                                        <button onclick="promoteProduct('BT001')" class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">推广</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Rank 2 -->
                    <div class="bg-white border border-gray-200 rounded-xl p-4">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-gradient-to-br from-gray-400 to-gray-500 text-white rounded-full flex items-center justify-center text-lg font-bold mr-4 flex-shrink-0">
                                2
                            </div>
                            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-sm font-semibold text-gray-800">智能手表 Series 6</h3>
                                    <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">亚军</span>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs">
                                    <div>
                                        <span class="text-gray-500">销量: </span>
                                        <span class="font-bold text-orange-600">52件</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">销售额: </span>
                                        <span class="font-bold text-green-600">¥67,548</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">增长: </span>
                                        <span class="font-bold text-green-600">+8.7%</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-sm font-bold text-indigo-600">¥1,299</span>
                                    <div class="flex space-x-1">
                                        <button onclick="viewProductDetail('SW001')" class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">详情</button>
                                        <button onclick="promoteProduct('SW001')" class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">推广</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Rank 3 -->
                    <div class="bg-white border border-gray-200 rounded-xl p-4">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-gradient-to-br from-orange-400 to-orange-500 text-white rounded-full flex items-center justify-center text-lg font-bold mr-4 flex-shrink-0">
                                3
                            </div>
                            <img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-sm font-semibold text-gray-800">便携充电宝 20000mAh</h3>
                                    <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded-full">季军</span>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs">
                                    <div>
                                        <span class="text-gray-500">销量: </span>
                                        <span class="font-bold text-orange-600">41件</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">销售额: </span>
                                        <span class="font-bold text-green-600">¥3,649</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">增长: </span>
                                        <span class="font-bold text-green-600">+12.3%</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-sm font-bold text-indigo-600">¥89</span>
                                    <div class="flex space-x-1">
                                        <button onclick="viewProductDetail('PB001')" class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">详情</button>
                                        <button onclick="promoteProduct('PB001')" class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">推广</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Rank 4-10 -->
                    <div class="bg-white border border-gray-200 rounded-xl p-4">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-500 text-white rounded-full flex items-center justify-center text-lg font-bold mr-4 flex-shrink-0">
                                4
                            </div>
                            <img src="https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-sm font-semibold text-gray-800">无线键盘鼠标套装</h3>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs">
                                    <div>
                                        <span class="text-gray-500">销量: </span>
                                        <span class="font-bold text-orange-600">38件</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">销售额: </span>
                                        <span class="font-bold text-green-600">¥6,042</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">增长: </span>
                                        <span class="font-bold text-green-600">+5.4%</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-sm font-bold text-indigo-600">¥159</span>
                                    <div class="flex space-x-1">
                                        <button onclick="viewProductDetail('KB001')" class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">详情</button>
                                        <button onclick="promoteProduct('KB001')" class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">推广</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white border border-gray-200 rounded-xl p-4">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-500 text-white rounded-full flex items-center justify-center text-lg font-bold mr-4 flex-shrink-0">
                                5
                            </div>
                            <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=60&h=60&fit=crop" 
                                 alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                            <div class="flex-1">
                                <div class="flex items-center justify-between mb-1">
                                    <h3 class="text-sm font-semibold text-gray-800">蓝牙音箱运动版</h3>
                                </div>
                                <div class="grid grid-cols-3 gap-2 text-xs">
                                    <div>
                                        <span class="text-gray-500">销量: </span>
                                        <span class="font-bold text-orange-600">29件</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">销售额: </span>
                                        <span class="font-bold text-green-600">¥8,671</span>
                                    </div>
                                    <div>
                                        <span class="text-gray-500">增长: </span>
                                        <span class="font-bold text-red-600">-2.1%</span>
                                    </div>
                                </div>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-sm font-bold text-indigo-600">¥299</span>
                                    <div class="flex space-x-1">
                                        <button onclick="viewProductDetail('SP001')" class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">详情</button>
                                        <button onclick="promoteProduct('SP001')" class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">推广</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- More products -->
                    <div class="text-center py-6">
                        <button onclick="loadMoreProducts()" class="bg-indigo-100 text-indigo-600 text-sm px-6 py-2 rounded-lg hover:bg-indigo-200 transition-colors">
                            <i class="fas fa-sync mr-2"></i>查看更多商品
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Filter products by time period
        function filterProducts(period) {
            // Remove active styles from all filter buttons
            document.querySelectorAll('[id^="filter-"]').forEach(btn => {
                btn.classList.remove('bg-indigo-500', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-600');
            });
            
            // Add active styles to selected button
            document.getElementById('filter-' + period).classList.remove('bg-gray-100', 'text-gray-600');
            document.getElementById('filter-' + period).classList.add('bg-indigo-500', 'text-white');
            
            // In a real app, this would filter the products list
            showToast('筛选：' + getFilterName(period));
        }

        function getFilterName(period) {
            const names = {
                'all': '全部商品',
                'week': '本周热销',
                'month': '本月热销',
                'rising': '上升趋势'
            };
            return names[period] || '全部商品';
        }

        // View product detail
        function viewProductDetail(productId) {
            window.location.href = 'product-detail.html?id=' + productId;
        }

        // Promote product
        function promoteProduct(productId) {
            if (confirm('确定要推广此商品吗？\n\n推广后该商品将获得更多曝光机会')) {
                alert(`商品 ${productId} 推广设置成功！\n\n将在1小时内生效，预计增加曝光30%`);
                showToast('推广设置成功');
            }
        }

        // Export data
        function exportData() {
            const formats = ['Excel表格', 'CSV文件', 'PDF报告'];
            const formatIndex = prompt('选择导出格式：\n1. Excel表格\n2. CSV文件\n3. PDF报告\n\n请输入序号(1-3):');
            
            if (formatIndex && formatIndex >= 1 && formatIndex <= 3) {
                const selectedFormat = formats[formatIndex - 1];
                alert(`正在导出热销商品数据\n格式: ${selectedFormat}\n\n导出完成后将发送到您的邮箱`);
                showToast('导出请求已提交');
            }
        }

        // Load more products
        function loadMoreProducts() {
            showToast('正在加载更多商品...');
            // In a real app, this would load more products
        }

        // Show toast message
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            filterProducts('all');
        });
    </script>
</body>
</html>